<template>
  <div class="center_body">
    <div>欢迎用户:<span>{{$store.state.user.name}}</span>进入个人事务管理系统</div>
    <div class="wrapp">
      <a href="javascript:;" @touchstart = 'handleToLogout'>退出</a>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Center',
  methods: {
    handleToLogout () {
      this.axios.get('/api2/users/logout').then((res) => {
        var status = res.data.status
        if (status === 0) {
          this.$store.commit('user/USER_NAME', {name: ''})
          this.$router.push('/Individual/Login')
        }
      })
    }
  },
  beforeRouteEnter (to, from, next) {
    axios.get('/api2/users/getUser').then((res) => {
      var status = res.data.status
      if (status === 0) {
        next(vm => {
          vm.$store.commit('user/USER_NAME', {
            name: res.data.data.username
          })
        })
      } else {
        next('/Individual/Login')
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
  .center_body
    font-size: 18px
    div
      margin-top: 60%
      text-align center
      span
        font-size: 22px
        color: #66cdaa
    .wrapp
      margin: 40px
      height: 40px
      background #66cdaa
      border-radius: 18px
      a
        line-height: 40px
        color: white
        display: block
</style>
